<template>
  <div style="display: inline-block" class="ml-20">
    <el-input-number v-model="number" controls-position="right" :min="0" :precision="2" v-if="isRMB" @change="change"/>
    <el-radio-group v-model="isRMB" class="ml-20">
      <el-radio-button :label="false">₭</el-radio-button>
      <el-radio-button :label="true">￥</el-radio-button>
    </el-radio-group>
    <span v-if="isRMB" class="ml-20">1 : {{rate}}</span>
  </div>
</template>

<script>
  import {getExchangeRateApi} from "@/api/website/inform";

  export default {
    name: "ExchangeRate",
    props: {
      that: {
        type: Object,
        required: true
      },
      freight: {
        required: true
      }
    },
    data() {
      return {
        number: 0,
        rate: 0
      }
    },
    watch: {
      freight(value) {
        if (value === 0) {
          this.number = 0
        }
      }
    },
    computed: {
      isRMB: {
        get() {
          return this.$storeGet.setting.isRMB;
        },
        set(value) {
          this.$storeSet('changeSetting', {
            key: 'isRMB',
            value: value
          })
        }
      }
    },
    mounted() {
      this.getExchangeRate()
    },
    methods: {
      getExchangeRate() {
        let permission = this.$storeGet.roles;
        if (!permission.includes('getExchangeRate')) return
        getExchangeRateApi().then(result => {
          this.rate = result.resultParam.systemConfig.value / 1
        })
      },
      change(value) {
        let _this = this.that
        _this.form.freight = value * this.rate
      }
    }
  }
</script>
